<template>
  <div class="login-container">
    <div class="left--side"></div>
    <div class="main-container">
      <div class="login-form-wrapper">
        <el-form
          ref="form"
          label-width="auto"
          size="large"
          label-position="right"
          status-icon
          :rules="rules"
          @submit.prevent="onsubmit"
          :model="formModel"
        >
          <el-form-item :label="$t('signUp.mail')" prop="username">
            <template #label>
              <span style="font-weight: 600; font-size: 16px">
                {{ $t("signUp.mail") }}
              </span>
            </template>
            <el-input :placeholder="$t('signUp.input')" type="text" class="input__default_theme"
                      v-model="formModel.username" :clearable="false" />
          </el-form-item>
          <el-form-item :label="$t('signUp.password')" prop="password">
            <template #label>
              <span style="font-weight: 600; font-size: 16px">
                {{ $t("signUp.password") }}
              </span>
            </template>
            <el-input
              class="input__default_theme"
              v-model="formModel.password"
              :clearable="false"
              :placeholder="$t('signUp.input')"
              show-password
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label=" ">
            <div class="remember-checkbox" @click.stop="onRememberChange">
              <el-icon v-if="remember" style="transform: translateY(-10px)">
                <Check />
              </el-icon>
            </div>
            <span class="remember-checkbox-text" @click.stop="onRememberChange">
              {{ $t("signUp.remember") }}
            </span>
          </el-form-item>
          <el-form-item label="">
            <el-button size="large" :loading="loading" native-type="submit" class="buttons-primary login-button"
            >
              {{ $t("signUp.login") }}
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="right--side">
      <div class="right-side-container"><span @click="toSignUp">
        {{ $t("signUp.signUp") }}
      </span> | <span @click="router.push('/forget-password')">
        {{ $t("signUp.forget") }}
      </span></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, type FormRules } from "element-plus";
import { Check } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { fetchLogin } from "@/http/user";
import { LOGIN_KEY, REMEMBER_PASSWORD_KEY } from "@/libs/KEY";
import type { Http } from "@/interface/Http";
import type { User } from "@/interface/User";
import { useUserInfo } from "@/libs/useUserInfo";
import { useUserInfoStore } from "@/stores/user";
import { useI18n } from "vue-i18n";

const form = ref();
const userInfoStore = useUserInfoStore();
const remember = ref(Boolean(window.localStorage.getItem(REMEMBER_PASSWORD_KEY)));
const router = useRouter();
const loading = ref(false);
const { t } = useI18n();

interface RuleForm {
  username: string;
  password: string;
}

const formModel = reactive<RuleForm>({
  username: "",
  password: ""
});
const rules = reactive<FormRules>({
  username: [
    { required: true, message: t("signUp.mailLengthError"), trigger: "blur" }

  ],
  password: [
    { required: true, message: t("signUp.passwordError"), trigger: "blur" }
    // { min: 6, max: 50, message: '密码长度', trigger: 'blur' },
  ]
});
const toSignUp = () => {
  router.push({
    path: "/sign-up"
  });
};
const onRememberChange = () => {
  remember.value = !remember.value;
  remember.value ? window.localStorage.setItem(REMEMBER_PASSWORD_KEY, REMEMBER_PASSWORD_KEY) : window.localStorage.removeItem(REMEMBER_PASSWORD_KEY);
};
const userInfo = useUserInfo();
const onsubmit = () => {
  if (form.value) {
    form.value.validate(async (valid: boolean) => {
      if (valid) {
        loading.value = true;
        fetchLogin(formModel).then((res: Http.Response<User.Data>) => {
          if (res?.code === 200) {
            router.replace("/");
            userInfo.value = res.data;
            userInfoStore.setUserInfo(res.data);

            if (remember.value) {
              window.localStorage.setItem(LOGIN_KEY, JSON.stringify(formModel));
            }
          } else {
            ElMessage.error(res?.msg);
          }
        }).finally(() => {
          loading.value = false;
        });
      }
    });
  }
};
onMounted(() => {
  const loginData = window.localStorage.getItem(LOGIN_KEY);
  if (loginData) {
    const _loginData = JSON.parse(loginData);
    formModel.password = _loginData.password;
    formModel.username = _loginData.username;
  }
});
</script>
<style scoped lang="scss">
@import "@/theme";

.login-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: #f0f2f5;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;

  .left--side {
    height: 100%;
    width: 30%;
    min-width: 200px;
    background-image: url("@/assets/login-bg-left.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
  }

  .right--side {
    height: 100%;
    width: 30%;
    min-width: 200px;
    background-image: url("@/assets/login-bg-right.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    position: relative;

    .right-side-container {
      position: absolute;
      bottom: 6%;
      right: 15%;
      color: #11b734;
      font-size: 14px;
      text-decoration: none;

      span {
        height: 20px;
        border-bottom: 1px solid #11b734;
        cursor: pointer;

        &:hover {
          color: #088c24;
        }
      }
    }
  }

  .main-container {
    height: 400px;
    width: 40%;
    min-width: 430px;
    background-image: url("@/assets/logo@2x.png");
    background-repeat: no-repeat;
    background-size: 66%;
    background-position: top center;

    .login-form-wrapper {
      margin: 28% auto 0 auto;
      width: 50%;
      min-width: 360px;
    }

    .remember-checkbox-text {
      cursor: pointer;
      color: #2c3e50;

      &:hover {
        color: #676767;
        cursor: pointer;
        user-select: none;
      }

    }

    .remember-checkbox {
      width: 18px;
      height: 18px;
      color: green;
      display: inline-block;
      border: 1px solid #6c6c6c;
      font-size: 16px;
      margin-right: 5px;

      cursor: pointer;
    }
  }

  .login-button {
    margin: 10px auto 0 auto;
    width: 55%;
  }
}
</style>
